<template>
	<view
		class="page-login"
		:style="{
			height
		}"
	>
		<view class="label">客服端快捷登录</view>

		<view class="form">
			<view class="form-item">
				<cl-input v-model="form.username" placeholder="请输入账号" clearable maxlength="16">
					<!-- <text class="area-code" slot="prepend">+86</text> -->
				</cl-input>
			</view>

			<view class="form-item code">
				<cl-input v-model="form.password" type="password" placeholder="请输入密码" maxlength="16" clearable>
					<!-- <cl-button type="text" size="small" slot="append">获取验证码</cl-button> -->
				</cl-input>
			</view>

			<cl-button fill round type="primary" class="login-btn" @tap="submit">登录</cl-button>
		</view>

		<view class="other">
			<cl-divider width="400rpx" color="#ccc">第三方登录</cl-divider>

			<view class="tp">
				<view class="block" @click="ShowOtherLogin">
					<text class="iconfont icon-wechat"></text>
				</view>
				<view class="block" @click="ShowOtherLogin">
					<text class="iconfont icon-qq"></text>
				</view>
				<view class="block" @click="ShowOtherLogin">
					<text class="iconfont icon-weibo"></text>
				</view>
			</view>

			<view class="protocol">登录即代表同意<text class="link">《冰河在线客服协议》</text></view>
		</view>

		<cl-toast ref="toast"></cl-toast>
	</view>
</template>

<script>
// 避免安卓 input 聚焦时有障碍元素
const { windowHeight } = uni.getSystemInfoSync();
import http from '@/common/requestConfig.js';
export default {
	components: {
		http
	},
	data() {
		return {
			form: {
				username: '',
				password: ''
			}
		};
	},

	computed: {
		height() {
			return windowHeight + 'px';
		}
	},
	onLoad() {
		//this.LoginInfo();
	},
	methods: {
		submit() {
			const { username, password } = this.form;
			const { toast } = this.$refs;
			if (!username) {
				return toast.open('请输入账号');
			}

			// if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(phone)) {
			// 	return toast.open('手机号格式错误');
			// }

			if (!password) {
				return toast.open('请输入密码');
			}
			
			
			
			let that = this;
			let httpData = {
				username:username,password:password
			};
			http.post("customer/login", httpData
			).then(res => {
				if(res.code != 1){
					uni.showModal({
						title:"系统提示",
						showCancel:false,
						content:res.message
					})
				}else{
					uni.setStorageSync("token",res.data);
					uni.showToast({
						icon:"none",
						title:res.message
					})
					that.LoginInfo();
					// setTimeout(function(){
					// 	that.LoginInfo();
					// },2000);
					setTimeout(function(){
						uni.switchTab({
							url: '/pages/message/index'
						});
					},1000)
				}
				// uni.setStorageSync("token",res.message);
				// that.access_token = res.data;
				// //开始连接
				// that.InitSignalR();
			}).catch(res=>{
				uni.showModal({
					title:"系统提示",
					showCancel:false,
					content:"登录出现错误！"
				})
			});

			// uni.switchTab({
			// 	url: '/pages/message/index'
			// });
		},
		ShowOtherLogin(){
			uni.showToast({
				icon:"none",
				title:"暂不支持其它登录方式!"
			})
		},
		LoginInfo(){
			let that = this;
			//uni.showLoading();
			http.post("customer/CreateSignalR", {}
			).then(res => {
				//uni.hideLoading();
				if(res.code == 1){
					global.access_token = res.data;
					//console.log(global.access_token);
					global.InitSignalR();
					
				}else{
					uni.redirectTo({
						url:"/pages/login/index"
					})
				}
			}).catch(res=>{
				console.log('throw error..');
				//that.LoginInfo();
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}

.page-login {
	height: 100%;
	padding: 0 70rpx;
	position: relative;

	.label {
		font-size: 36rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		padding: 140rpx 0 50rpx 0;
	}

	.form {
		.form-item {
			margin-bottom: 30rpx;
			width: 100%;

			.cl-input {
				border: 0;
				border-radius: 0;
				border-bottom: 1rpx solid #eee;
				padding: 0;
				height: 90rpx;
				width: 100%;

				/deep/.cl-input__clear {
					line-height: 90rpx;
				}
			}

			&.code {
				.cl-button {
					flex: 1;
				}
			}
		}

		.login-btn {
			display: block;
			height: 70rpx;
			line-height: 70rpx;
			margin-top: 70rpx;
		}
	}

	.other {
		position: absolute;
		bottom: 60rpx;
		left: 0;
		width: 100%;

		.tp {
			display: flex;
			justify-content: center;
			width: 600rpx;
			margin: 55rpx auto 0;

			.block {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #f6f7f9;
				height: 80rpx;
				width: 80rpx;
				border-radius: 80rpx;
				margin: 0 40rpx;

				.iconfont {
					font-size: 70rpx;
					color: #c5c6c5;
				}
			}
		}

		.protocol {
			margin-top: 110rpx;
			font-size: 26rpx;
			text-align: center;

			.link {
				color: #ffc100;
			}
		}
	}
}
</style>
